<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关按钮</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="应用">
        <my-swich 
            @开关已切换="切换1" 
            开关样式="迷你"
            背板颜色="green"
            边框颜色="green"
            按钮颜色="blue"
        ></my-swich>
        <div>开关状态: {{状态1}}</div>
        <my-swich 
            @开关已切换="切换2" 
            开关样式="常规"
            背板颜色="green"
            边框颜色="green"
            按钮颜色="red"
        ></my-swich>
        <div>开关状态: {{状态2}}</div>
    </div>
</body>
<script>
    const 组件 = {
        props: ['开关样式', '边框颜色', '背板颜色', '按钮颜色'],
        data() {
            return {
                打开状态: false,
                横坐标: '0px',
            }
        },
        computed: {
            背板样式: {
                get() {
                    if (this.开关样式 == '迷你') {
                        return `
                            position: relative;
                            border-color: ${this.边框颜色};
                            border-width: 2px;
                            border-style: solid;
                            width: 55px;
                            height: 30px;
                            border-radius: 30px;
                            background-color: ${this.打开状态 ? this.背板颜色 : 'white'};
                        `
                    } else {
                        return `
                            position: relative;
                            border-color: ${this.边框颜色};
                            border-width: 2px;
                            border-style: solid;
                            width: 55px;
                            height: 30px;
                            border-radius: 10px;
                            background-color: ${this.打开状态 ? this.背板颜色 : 'white'};
                        `
                    }
                }
            },
            按钮样式: {
                get() {
                    if (this.开关样式 == '迷你') {
                        return `
                            position: absolute;
                            width: 30px;
                            height: 30px;
                            left: ${this.横坐标};
                            border-radius: 50%;
                            background-color: ${this.按钮颜色};
                        `
                    } else {
                        return `
                            position: absolute;
                            width: 30px;
                            height: 30px;
                            left: ${this.横坐标};
                            border-radius: 8px;
                            background-color: ${this.按钮颜色};
                        `
                    }
                }
            }
        },
        methods: {
            点击() {
                this.打开状态 = !this.打开状态
                this.横坐标 = this.打开状态 ? '25px' : '0px'
                this.$emit('开关已切换', this.打开状态)
            }
        },
        template: `
            <div :style="背板样式" @click='点击'>
                <div :style="按钮样式"></div>
            </div>
        `
    }
    const 应用 = Vue.createApp({
        data() {
            return {
                状态1: "关",
                状态2: "关",
            }
        },
        methods: {
            切换1 (打开状态) {
                this.状态1 = 打开状态 ? "开" : "关"
            },
            切换2 (打开状态) {
                this.状态2 = 打开状态 ? "开" : "关"
            },
        }
    })
    应用.component('my-swich', 组件)
    应用.mount('#应用')
</script>
</html>
